<template>
    <div>
        <div class="mui-numbox" data-numbox-min='1' :data-numbox-max='stores'>
            <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
            <input id="test" class="mui-input-numbox" type="number" :value="num" @change="sendNumber" ref="numbox"/>
            <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
        </div>
    </div>
</template>

<script>
    import mui from '../../lib/mui/js/mui.js'

    export default {
        mounted() {
            mui('.mui-numbox').numbox()
        },
        data() {
            return {
                num: 1,
                stores: 0
            }
        },
        props:['shopId'],
        created() {
            this.$store.state.carInfo.forEach(item => {
                if(item.id === this.shopId){
                    this.num = item.num
                    this.stores = item.stores
                }
            });
        },
        methods: {
            sendNumber() {
                this.$store.commit('amendShopNum', {id: this.shopId, num: this.$refs.numbox.value })
            }
        }
    }
</script>

<style lang="scss" scoped>
.mui-numbox{
    height: 22px;
    width: 90px;
    padding: 0 25px;
    .mui-btn{
        width: 25px;
    }
}
</style>